<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<title>数据分析</title>
<link rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<link rel="stylesheet"
	href="AdminLTE/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="AdminLTE/dist/css/adminlte.min.css">
<link rel="stylesheet" href="css/dataanalysis.css">
<link rel="stylesheet" href="css/bootstrap-table.min.css">
<link rel="stylesheet" href="css/comon0.css">
 <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body class="hold-transition sidebar-mini">
	<div class="wrapper">
		<!-- Navbar -->
		<nav
			class="main-header navbar navbar-expand navbar-white navbar-light">
			<!-- Left navbar links -->
			<ul class="navbar-nav">
				<li class="nav-item"><a class="nav-link" data-widget="pushmenu"
					href="#" role="button"><i class="fas fa-bars"></i></a></li>
				<li class="nav-item d-none d-sm-inline-block"><a href="#"
					class="nav-link">主页</a></li>
				<li class="nav-item d-none d-sm-inline-block"><a
					href="https://gitee.com/CQJTUSoftwareEngineeringOrg/NYBikeSystem"
					class="nav-link" target="_blank">联系我们</a></li>
			</ul>
		</nav>

		<!-- Main Sidebar Container -->
		<aside class="main-sidebar sidebar-dark-primary elevation-4">
			<!-- Brand Logo -->
			<a class="brand-link"> <img
				src="AdminLTE/dist/img/AdminLTELogo.png" alt="AdminLTE Logo"
				class="brand-image img-circle elevation-3" style="opacity: .8">
				<h6 class="brand-text font-weight-normal">敢敢数据分析系统</h6>
			</a>

			<!-- Sidebar -->
			<div class="sidebar">

				<!-- Sidebar Menu -->
				<nav class="mt-2">
					<ul class="nav nav-pills nav-sidebar flex-column"
						data-widget="treeview" role="menu" data-accordion="false">
						<li class="nav-item menu-open"><a href="#"
							class="nav-link active"> <i
								class="nav-icon fas fa-tachometer-alt"></i>
								<p>数据分析用例</p>
						</a>
							<ul class="nav nav-treeview">
								<li class="nav-item"><a href="#rory" class="nav-link active">
										<i class="far fa-circle nav-icon"></i>
										<p>站点安全等级</p>
								</a></li>
								<li class="nav-item"><a href="#asia" class="nav-link"> <i
										class="far fa-circle nav-icon"></i>
										<p>车辆检修</p>
								</a></li>
								<li class="nav-item"><a href="#" class="nav-link"> <i
										class="far fa-circle nav-icon"></i>
										<p>用户增长</p>
								</a></li>
								<li class="nav-item"><a href="#LRY" class="nav-link"> <i
										class="far fa-circle nav-icon"></i>
										<p>高频站点</p>
								</a></li>
								<li class="nav-item"><a href="#" class="nav-link"> <i
										class="far fa-circle nav-icon"></i>
										<p>热点信息</p>
								</a></li>
								<li class="nav-item"><a href="#" class="nav-link"> <i
										class="far fa-circle nav-icon"></i>
										<p>站台流量监控</p>
								</a></li>
							</ul></li>
					</ul>
				</nav>
				<!-- /.sidebar-menu -->
			</div>
			<!-- /.sidebar -->
		</aside>

		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<div class="content-header">
				<div class="container-fluid">
					<div class="row mb-2">
						<div class="col-sm-6">
							<h1 class="m-0 text-dark">Start</h1>
						</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.container-fluid -->
			</div>

			<!-- 内容区 -->
			<div class="content">
				<div class="container-fluid">

					<!-- rory's code segment -->
					<div class="row" id="rory">
						<div class="col-lg-12 col-md-12 col-sm-12">
              <div class="card card-primary">
                <div class="card-header">
                  <h3 class="card-title">站点安全分析</h3>
                  <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                    </button>
                  </div>
                </div>

                <div class="card-body">
                  <div class="row">
                    <div class="col-lg-5 col-md-5 col-sm-5">
                      <h6>选择事故发生日期范围</h6>
                      <input style="margin-top:5px;" type="text" class="form-control" placeholder="年月范围" id="datepicker">
                    </div>
                    <div class="col-lg-5 col-md-5 col-sm-5">
                      <h6>选择事故发生半径(公里)</h6>
                      <input style="margin-top:5px;" id="input-radius" type="text" class="form-control" placeholder="输入半径">
                    </div>
                    <div class="col-lg-2">
                      <button type="button" class="btn btn-block btn-info btn-sm" style="width:160px;margin-top: 40px;margin-left: 20px;" id="btn-get-security-data">获取</button>
                    </div>
                  </div>
                  <div class="row" style="margin-top:20px;">
                    <div id="security-table" class="col-md-12" style="height:500px;display:none;overflow:scroll;">
                      <table class="table" id="table-station-security">
						<thead id="table-head">
						<tr>
						<th>站点id</th>
						<th>站点名称</th>
				         <th>事故场数</th>
				         <th>受伤人数</th>
				         <th>死亡人数</th>
				         <th>危险系数</th>
				         </tr>
				         </thead>
				         <tbody id="table-body">
                       </tbody>
                       </table>  
                    </div>
                    </div>
                  	<div id="security-graph" class="col-md-12" style="height:500px;display:none;">
                  		<div id="rory-echarts" style="height:500px;"></div>
                  	</div>
                </div>

              </div>
						</div>
					</div>

					<!-- end -->

					<!-- hkccc's code segment -->
					<div class="row">
						<div class="col-lg-12 col-md-12 col-sm-12">
							<div class="card">
								<div class="card-body card-primary card-outline">hkccc</div>
							</div>
						</div>
					</div>
					<!-- end -->

					<!-- Asia's code segment -->
					<div class="row" id="asia">
						<div class="col-lg-12 col-md-12 col-sm-12">
							<div class="card">
								<div class="card-body card-primary card-outline">
									<p>AsiaYin</p>
									<div class="card card-success">
										<div class="card-header">
											<h3 class="card-title">
												<font style="vertical-align: inherit;"><font
													style="vertical-align: inherit;">最需要检修的单车或使用最多的单车</font></font>
											</h3>
											<div class="card-tools">
												<button type="button" class="btn btn-tool"
													data-card-widget="collapse">
													<i class="fas fa-minus"></i>
												</button>
												<button type="button" class="btn btn-tool"
													data-card-widget="remove">
													<i class="fas fa-times"></i>
												</button>
											</div>
										</div>
              <div class="card-body">
                <div class="d-flex">
                  <p class="d-flex flex-column">
                    <span class="text-bold text-lg">查看最有可能需要检修的单车id</span>
                    <span>（数据来自官网）</span>
                  </p>
                  <p class="ml-auto d-flex flex-column text-right">
                    <span class="text-success">
                      2019年2月
                    </span>
                    <span class="text-muted"></span>
                  </p>
                </div>
                <!-- /.d-flex -->
               	
 				<div id="echart1" style="width: 600px;height:400px;"></div>

                <div class="d-flex flex-row justify-content-end">
                </div>
              </div>
									</div>
									<div class="card-body">
										<div class="chart">
											<div class="chartjs-size-monitor">
												<div class="chartjs-size-monitor-expand">
													<div class=""></div>
												</div>
												<div class="chartjs-size-monitor-shrink">
													<div class=""></div>
												</div>
											</div>
											
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-lg-12 col-md-12 col-sm-12">
							<div class="card">
								<div class="card-body card-primary card-outline">
									<p>AsiaYin</p>
									<div class="card card-success">
										<div class="card-header">
											<h3 class="card-title">
												<font style="vertical-align: inherit;"><font
													style="vertical-align: inherit;">按用户类别划分的骑行总时间</font></font>
											</h3>
											<div class="card-tools">
												<button type="button" class="btn btn-tool"
													data-card-widget="collapse">
													<i class="fas fa-minus"></i>
												</button>
												<button type="button" class="btn btn-tool"
													data-card-widget="remove">
													<i class="fas fa-times"></i>
												</button>
											</div>
										</div>
              <div class="card-body">
                <div class="d-flex">
                  <p class="d-flex flex-column">
                    <span class="text-bold text-lg">查看不同用户类别骑行总时间</span>
                    <span>（数据来自官网）</span>
                  </p>
                  <p class="ml-auto d-flex flex-column text-right">
                    <span class="text-success">
                      2019年2月
                    </span>
                    <span class="text-muted"></span>
                  </p>
                </div>
                <!-- /.d-flex -->
               	
 				<div id="echart2" style="width: 600px;height:400px;"></div>

                <div class="d-flex flex-row justify-content-end">
              

                </div>
              </div>
									</div>
									<div class="card-body">
										<div class="chart">
											<div class="chartjs-size-monitor">
												<div class="chartjs-size-monitor-expand">
													<div class=""></div>
												</div>
												<div class="chartjs-size-monitor-shrink">
													<div class=""></div>
												</div>
											</div>
										
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- end -->

					<!-- late-whale's code segment -->
					<div class="row">
						<div class="col-lg-12 col-md-12 col-sm-12">
							<div class="card">
								<div class="card-body card-primary card-outline">
									late-whale</div>
							</div>
						</div>
					</div>
					<!-- end -->

					<!-- LRY's code segment -->
					<!-- <div class="row" id="LRY"> -->
						<div class="col-lg-12 col-md-12 col-sm-12">
							<div class="card">
								<div class="card-body card-primary card-outline">
									<p>LRY</p>
									<div class="card card-success">
										<div class="card-header">
											<h3 class="card-title">
												<font style="vertical-align: inherit;"><font
													style="vertical-align: inherit;">高频站点</font></font>
											</h3>
											<div class="card-tools"></div>
										</div>
										<div id="topCount"
											style="width: 700px; height: 500px;; margin: auto; margin-top: 20px;"></div>
										<div id="lastCount"
											style="width: 700px; height: 500px; margin: auto; margin-top: 20px;"></div>
									</div>
									<div class="card card-success">
										<div class="card-header">
											<h3 class="card-title">
												<font style="vertical-align: inherit;"><font
													style="vertical-align: inherit;">高频站点车流量</font></font>
											</h3>
										</div>
										<div id="stationCount"
											style="width: 700px; height: 500px;; margin: auto; margin-top: 20px;"></div>
										<div class="card-body">
											<div class="chart">
												<div class="chartjs-size-monitor">
													<div class="chartjs-size-monitor-expand">
														<div class=""></div>
													</div>
													<div class="chartjs-size-monitor-shrink">
														<div class=""></div>
													</div>
												</div>
												<canvas id="stackedBarChart"
													style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; display: block; width: 572px;"
													width="715" height="312" class="chartjs-render-monitor"></canvas>
											</div>
										</div>
									</div>
									<div class="card-body">
										<div class="chart">
											<div class="chartjs-size-monitor">
												<div class="chartjs-size-monitor-expand">
													<div class=""></div>
												</div>
												<div class="chartjs-size-monitor-shrink">
													<div class=""></div>
												</div>
											</div>
											<canvas id="barChart"
												style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; display: block; width: 572px;"
												width="715" height="312" class="chartjs-render-monitor"></canvas>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- end -->


				</div>
			</div>
			<!-- /.container-fluid -->
		</div>
		<!-- 内容区，END -->
	</div>

	<!-- Control Sidebar -->
	<aside class="control-sidebar control-sidebar-dark">
		<!-- Control sidebar content goes here -->
		<div class="p-3">
			<h5>Title</h5>
			<p>Sidebar content</p>
		</div>
	</aside>
	<!-- /.control-sidebar -->

	<!-- Main Footer -->
	<footer class="main-footer">
		<!-- To the right -->
		<div class="float-right d-none d-sm-inline">从心而一，敢作敢当</div>
		<!-- Default to the left -->
		<strong>Copyright &copy; 2020 <a href="https://adminlte.io">GanGan.com</a>.
		</strong> All rights reserved.
	</footer>
	</div>
	<!-- ./wrapper -->


	<!-- REQUIRED SCRIPTS -->
	<!-- jQuery -->
	<script src="AdminLTE/plugins/jquery/jquery.min.js"></script>
	<!-- Bootstrap 4 -->
	<script src="AdminLTE/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
	<!-- AdminLTE App -->
	<script src="AdminLTE/dist/js/adminlte.min.js"></script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
  	<script type="text/javascript" src="laydate/laydate.js"></script>
  	<script type="text/javascript" src="js/dataanalysis.js"></script>
  	<script src="js/bootstrap-table.min.js"></script>
</body>
</html>
